<template>
	<view class="article-item mt20 bg-white" @tap="handleArticleDetail">
		<view class="item-content">
			<view class="item-title line1 md title-color">{{ article.title }}</view>
			<view class="item-meta row-between mt10">
				<view class="item-meta-tags flex">
					<view class="meta-tag mr10 meta-color sm li-tag" v-for="(item, index) in article.tags">#{{ item.tag_name }}</view>
				</view>
				<view class="item-meta-user flex">
					<view class="meta-user-name meta-color mr20 sm li-tag">{{ article.user.username }}</view>
					<view class="meta-user-time meta-color sm">{{ calTime(article.date.iso) }}</view>
				</view>
				<view class="item-meta-comment row-center">
					<image class="icon-sm" src="../../static/images/comment.png"></image>
					<view class="meta-user-name meta-color mr20 sm ml10">{{ article.thumbsupCount }}</view>
					<image class="icon-sm" src="../../static/images/cute.png"></image>
					<view class="meta-user-name meta-color mr20 sm ml10">{{ article.commentCount }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { timeago, dateChangeFormat } from '@/utils/tools.js';

export default {
	name: 'article-item',
	props: {
		article: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
	methods: {
		calTime(time) {
			return timeago(new Date(time).getTime());
		},
		handleArticleDetail() {
			window.open(this.article.url);
		}
	}
};
</script>

<style scoped lang="less">
.article-item {
	.item-content {
		padding: 20rpx;
		.title-color {
			color: #1d2129;
		}
		.meta-color {
			color: #86909c;
		}
		.li-tag {
			max-width: 100rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
